<template>
  <div class="main_box_Freeback">
    <el-breadcrumb separator="/" style="margin-top: 20px">
      <el-breadcrumb-item :to="{ path: '/manager/order/tackOut' }"
        >首页</el-breadcrumb-item
      >
      <el-breadcrumb-item :to="{ path: '/manager/feedback/all' }"
        >所有反馈</el-breadcrumb-item
      >
    </el-breadcrumb>

    <el-dialog v-model="dialogFormVisible" title="反馈内容" width="500">
      <el-form-item label="反馈内容">
        <el-input v-model="freeback.content" type="textarea" autocomplete="off" />
      </el-form-item>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogFormVisible = false">Cancel</el-button>
          <el-button type="primary" @click="FreeBack"> 反馈 </el-button>
        </div>
      </template>
    </el-dialog>

    <el-form
      label-width="auto"
      :inline="true"
      style="display: flex; justify-content: end"
    >
      <el-form-item>
        <el-input v-model="content" placeholder="投诉内容" />
      </el-form-item>

      <el-form-item>
        <el-button :icon="Search" @click="getData" />
        <el-button type="primary" @click="flush">刷新</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="tableData" height="70vh" style="width: 100%">
      <el-table-column prop="content" label="反馈内容" width="180" />
      <el-table-column prop="userId.name" label="反馈者昵称" width="180" />
      <el-table-column prop="inputTime" label="反馈时间" />
      <el-table-column label="反馈状态">
        <template #default="scope">
          {{ scope.row.state == 2 ? "已反馈解决" : "待反馈解决" }}
        </template>
      </el-table-column>
      <el-table-column prop="updateTime" label="反馈解决时间" />
      <el-table-column prop="feedbackContent" label="反馈解决内容" />
    </el-table>
    <div class="demo-pagination-block">
      <el-pagination
        v-model:current-page="page"
        v-model:page-size="pageItem"
        :page-sizes="[20, 50, 100, 200]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageTotal"
        background="blue"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue";
import { Search } from "@element-plus/icons-vue";
import axios from "axios";
import { ElMessage } from "element-plus";
const pageTotal = ref(0);
const pageItem = ref(20);
const page = ref(1);
const tableData = ref([]);
// do not use same name with ref
const content = ref("");
const dialogFormVisible = ref(false);

const freeback = reactive({
  id: 0,
  content: "",
});

const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`);
  pageItem.value = val;
  getData();
};
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`);
  page.value = val;
  getData();
};

const getData = () => {
  const token = localStorage.getItem("student_auth_token");
  axios
    .get(
      "/api/complaint/select/" +
        page.value +
        "/" +
        pageItem.value +
        "?content=" +
        content.value,
      {
        headers: {
          token: token,
        },
      }
    )
    .then((res) => {
      // console.log(res);
      tableData.value = res.data.message.list;
      tableData.value.forEach((el) => {
        el.userId = JSON.parse(el.userId);
      });
      pageTotal.value = res.data.message.total;
      // console.log(res.data.message.list);
    })
    .catch((err) => {
      // console.log(err);
    });
};
getData();
const flush = () => {
  page.value = 1;
  pageItem.value = 20;
  content.value = "";
  getData();
};
</script>

<style lang="scss" scoped>
.main_box_Freeback {
  height: 100%;
  width: 100%;
}
.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}
.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}
</style>
